﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CellLinkEdit 单元格联动编辑 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    
    <!--引入皮肤样式-->
    <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <h1>CellLinkEdit 单元格联动编辑</h1>
    
    
    <div id="datagrid1" class="mini-datagrid" style="width:600px;height:280px;" 
        url="../data/AjaxService.jsp?method=SearchEmployees" 
        allowCellEdit="true" allowCellSelect="true" multiSelect="true"    
        oncellcommitedit="OnCellCommitEdit"
        oncellbeginedit="OnCellBeginEdit"
    >
        <div property="columns">
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
               
            <div field="dept_id" displayField="dept_name" width="150" headerAlign="center" >部门
                <input property="editor" class="mini-combobox" style="width:100%;" 
                    valueField="id" textField="name" url="../data/AjaxService.jsp?method=GetDepartments"/>                
            </div>   
            <div field="position"  displayField="position_name"  width="150" headerAlign="center" >职位
                <input property="editor" class="mini-combobox" style="width:100%;" 
                    valueField="id" textField="name"
                />                
            </div>   
        </div>
    </div>
    <script type="text/javascript">
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];

        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();

        function OnCellCommitEdit(e) {
            var grid = e.sender;
            var record = e.record;
            var field = e.field, value = e.value;
            if (field == "dept_id") {                 
                grid.updateRow(record, { position: "", position_name: "" });
            }
        }
        function OnCellBeginEdit(e) {        
            var grid = e.sender;
            var record = e.record;
            var field = e.field, value = e.value;
            var editor = e.editor;
            if (field == "position") {
                var id = record.dept_id;
                if (id) {
                    var url = "../data/AjaxService.jsp?method=GetPositionsByDepartmenId&id=" + id
                    editor.setUrl(url);
                } else {
                    e.cancel = true;
                }

            }
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        <p>部门和职位联动选择</p>
    </div>
</body>
</html>